<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>判断跨域中间件是否生效</title>
  <style>
    .container {
      display: flex;
      flex-direction: row;
      /* justify-content: flex-start | flex-end | center | space-between | space-around; */
      justify-content: flex-start;
      /*  align-items: flex-start | flex-end | center | baseline | stretch; */
      align-items: center;
      flex-wrap: wrap;
      width: 200px;
    }
  </style>
</head>

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/fetch/0.1.0/fetch.js"></script>

<body>
  <div class="sms-container">
    <label for="phone">
      手机号：
      <input type="text" id="phone" value="13177051777">
    </label>
    <label for="code">
      短信验证码：
      <input type="text" id="code" value="0000">
    </label>
    <button id="submit">GO！</button>
  </div>
  <div class="pwd-container">
    <label for="username">
      用户名：
      <input type="text" id="username" value="13177051777">
    </label>
    <label for="password">
      密码：
      <input type="text" id="password" value="0000">
    </label>
    <label for="code">
      图形验证码：
      <input type="text" id="code" value="0000">
      <img src="" alt="图形验证码">
    </label>
    <button id="submit">GO！</button>
  </div>
  <script>
    var oPhone = document.querySelector("#phone")
    var oCode = document.querySelector("#code")
    var oSubmit = document.querySelector("#submit")
    oSubmit.addEventListener("click", () => {
      axios.post('http://localhost:8000/login_sms', {
        phone: oPhone.value,
        code: oCode.value,
      })
        .then((res) => {
          console.log("返回结果==>", res);
        })
        .catch((error) => {
          console.log(error);
        });
      // fetch("http://localhost:8000/login_sms", {
      //   method: 'POST',
      //   body: JSON.stringify({
      //     phone: oPhone.value,
      //     code: oCode.value,
      //   })
      // }).then(response => response.json())
      //   .then(res => {
      //     // res就是我们请求的repos
      //     console.log(res)
      //   });
    })
  </script>
</body>

</html>